<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" @click="goBack"></i>
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="date-box">
                <i class="fa fa-caret-left" @click="prevMonth"></i>
                <p>{{ currentYear }}年{{ currentMonth }}月</p>
                <i class="fa fa-caret-right" @click="nextMonth"></i>
            </div>
            <table>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
            </table>
            <ul>
                <li v-for="day in days" :key="day.date">
                    <p :class="{'fontcolor': true, 'pselect': day.selected}">{{ day.date }}</p>
                    <p>{{ day.remaining ? '余' + day.remaining : '' }}</p>
                </li>
            </ul>
        </section>

        <div class="bottom-btn">
            <div></div>
            <div @click="this.$router.push('/confirmorder')">下一步</div>
        </div>

        <div class="bottom-ban"></div>
        <tijianfooter></tijianfooter>
    </div>
</template>

<script setup>
import '../style/css/selectdate.css'
import tijianfooter from "@/components/tijianfooter.vue";
import { ref, onMounted } from 'vue';
import { useRouter ,useRoute} from 'vue-router';

const currentYear = ref(2022);
const currentMonth = ref(1);
const days = ref([]);
const generateDays = () => {
    days.value = [];
    try {
        const daysInMonth = new Date(currentYear.value, currentMonth.value, 0).getDate();
        for (let i = 1; i <= daysInMonth; i++) {
            days.value.push({
                date: i,
                remaining: i === 18 ? 56 : i === 19 ? 66 : i === 20 ? 123 : i === 21 ? 178 : 200,
                selected: i === 18
            });
        }
    } catch (error) {
        console.error("日期生成错误:", error);
    }
};

// 页面加载时生成日期
onMounted(() => {
    generateDays();
});

const goBack = () => {
    history.go(-1);
};

const prevMonth = () => {
    if (currentMonth.value > 1) {
        currentMonth.value--;
    } else {
        currentMonth.value = 12;
        currentYear.value--;
    }
    generateDays();
};

const nextMonth = () => {
    if (currentMonth.value < 12) {
        currentMonth.value++;
    } else {
        currentMonth.value = 1;
        currentYear.value++;
    }
    generateDays();
};

const goToNextStep = () => {
    this.$router.push('/confirmorder')
};
</script>
